<!-- 楼宇管理页 -->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">楼宇管理</span>
    <el-button @click="beforeAddBuilding" type="primary" style="float:right;margin-top:13px;">
      新建楼宇
    </el-button>
  </div>
  <!-- 新增楼宇弹窗 -->
  <el-dialog :title="dialogTitle" v-model="dialogVisible"
             style="width:1000px;padding:40px;" :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="楼宇名称">
            <el-input placeholder="请输入内容" v-model="saveBuildingForm.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属校区">

            <el-select placeholder="请选择校区类型" v-model="saveBuildingForm.campus">
              <el-option v-for="item in campusArr"
                         :label="item.label" :value="item.value"></el-option>
            </el-select>

            <!--            <el-select placeholder="请选择" v-model="saveBuildingForm.campus">-->
            <!--              <el-option v-for="item in campusArr"-->
            <!--                          :label="item.label" :value="item.value"></el-option>-->
            <!--            </el-select>-->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="楼宇类型">
            <el-select placeholder="请选择" v-model="saveBuildingForm.buildingType">
              <el-option v-for="item in buildingTypeArr"
                         :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间">
            <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                            v-model="saveBuildingForm.createTime"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="更新时间">
            <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                            v-model="saveBuildingForm.updateTime"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveBuilding">确定</el-button>
    </template>
  </el-dialog>
  <!-- 楼宇搜索卡片 -->
  <el-card style="margin:20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="楼宇名称/编号">
        <el-input placeholder="请输入内容" style="width:220px;"
                  v-model="searchBuildingForm.name" @keydown.enter="loadBuildings"></el-input>
      </el-form-item>
      <el-form-item label="所属校区" style="width:220px;">
        <el-select placeholder="请选择"
                   v-model="searchBuildingForm.campus">
          <el-option v-for="item in campusArr"
                     :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="楼宇类型">
        <el-select placeholder="请选择" style="width:220px;"
                   v-model="searchBuildingForm.buildingType">
          <el-option v-for="item in buildingTypeArr"
                     :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadBuildings">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 楼宇列表 -->
  <el-card style="margin:20px;">
    <el-table :data="buildingArr" @selection-change="handleSelectionChange">
      <!-- 添加选择列 -->
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column type="index" label="序号" width="120" align="center"/>
      <el-table-column prop="name" label="楼宇名称" width="120" align="center"/>
      <el-table-column prop="id" label="楼宇编号" width="120" align="center"/>
      <el-table-column prop="campus" label="所属校区" width="120" align="center" :formatter="campusTypeFormatter"/>
      <el-table-column prop="buildingType" label="楼宇类型" width="120" align="center" :formatter="buildingTypeFormatter"/>
      <el-table-column prop="status" label="状态" align="center" :formatter="statusFormatter"/>
      <el-table-column prop="createTime" label="创建时间" align="center"/>
      <el-table-column prop="updateTime" label="更新时间" align="center"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="editBuilding(scope.row)">编辑</el-button>
          <el-button link type="primary" size="small" @click="deleteBuilding(scope.row.id)">删除</el-button>
          <el-button link type="primary" size="small" @click="showRoom(scope.row.id)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import router from "@/router";
import qs from "qs";
import axios from "axios";

// 控制新增楼宇弹窗是否显示
const dialogVisible = ref(false);
// 定义变量控制dialog的标题
const dialogTitle = ref('新增楼宇');

// 定义数组用来保存校区字典项
const campusArr = ref([

]);

onMounted(()=>{
  loadDictOptions(campusArr,'campus_type');
})

const campusTypeFormatter = (row,column,cellValue,index)=>{
  if(!campusArr.value){
    return cellValue;
  }
  for(let item of campusArr.value){
    if(item.value == cellValue){
      cellValue = item.label;
    }
  }
  return cellValue;
}

onMounted(()=>{
  loadDictOptions(buildingTypeArr,'building_type');
})

const buildingTypeFormatter = (row,column,cellValue,index)=>{
  if(!buildingTypeArr.value){
    return cellValue;
  }
  for(let item of buildingTypeArr.value){
    if(item.value == cellValue){
      cellValue = item.label;
    }
  }
  return cellValue;
}

// 定义数组用来保存楼宇类型字典项
const buildingTypeArr = ref([
  /*{ label: '教学楼', value: '教学楼' },
  { label: '办公楼', value: '办公楼' },
  { label: '宿舍楼', value: '宿舍楼' }*/
]);

// 定义对象用来保存楼宇表单数据
const saveBuildingForm = ref({
  name: '',
  code: '',
  campus: '',
  buildingType: '',
  createTime: '',
  updateTime: ''
});

// 定义对象用来保存楼宇搜索条件
const searchBuildingForm = ref({ name: '', campus: '', buildingType: '' });
// 定义数组用来保存楼宇列表表格数据
const buildingArr = ref([]);

// 定义加载楼宇的方法
const loadBuildings = () => {
  let data = qs.stringify(searchBuildingForm.value);
  axios.get(BASE_URL + '/v1/building/select?'+data).then((response) => {
    if( response.data.code === 2000){
      buildingArr.value = response.data.data;
    } else {
      ElMessage.error(response.data.msg);
    }
  });
};

// 一进入页面立即加载楼宇数据
onMounted(() => {
  loadBuildings();
});

// 定义重置搜索的方法
const resetSearch = () => {
  searchBuildingForm.value = {};
  loadBuildings();
};

/*
// 定义楼宇表格(所属校区列)显示文字转换的方法
const campusFormatter = (row, column, cellValue, index) => {
  const item = campusArr.value.find(item => item.value === cellValue);
  return item ? item.label : cellValue;
};

// 对楼宇状态显示内容进行文字转换

// 对楼宇类型显示内容进行文字转换
const buildingTypeFormatter = (row, column, cellValue, index) => {
  const item = buildingTypeArr.value.find(item => item.value === cellValue);
  return item ? item.label : cellValue;
};
*/

// 打开新增或编辑楼宇对话框
const beforeAddBuilding = () => {
  dialogTitle.value = '新增楼宇';
  dialogVisible.value = true;
  // 清空表单
  Object.assign(saveBuildingForm.value, {
    name: '',
    code: '',
    campus: '',
    type: '',
    createTime: '',
    updateTime: ''
  });
};

// 关闭对话框
const handleClose = () => {
  dialogVisible.value = false;
};

// 保存楼宇信息
const saveBuilding = () => {
  // 这里可以添加表单验证逻辑
  //ElMessage.success('楼宇信息已保存');
  //handleClose();
  // 模拟添加新楼宇到列表
  //if (dialogTitle.value === '新增楼宇') {
  //  const newBuilding = { ...saveBuildingForm.value };
  //  newBuilding.id = buildingArr.value.length + 1;
  //  buildingArr.value.push(newBuilding);
  //}
  let data = qs.stringify(saveBuildingForm.value);
  axios.post(BASE_URL + '/v1/building/save',data).then((response) => {
    if(response.data.code === 2000){
      ElMessage.success("保存成功!");
      saveBuildingForm.value = {};
      dialogVisible.value = false;
      loadBuildings();
    }else{
      ElMessage.error(response.data.msg)
    }
  });
};

// 编辑楼宇信息
const editBuilding = (row) => {
  dialogTitle.value = '编辑楼宇';
  dialogVisible.value = true;
  // 填充表单
  Object.assign(saveBuildingForm.value, row);
};

// 删除楼宇信息
const deleteBuilding = (id) => {
  axios.delete(BASE_URL + '/v1/building/delete/'+id).then((response) => {
    if (response.data.code === 2000) {
      ElMessage.success('删除成功');
      loadBuildings();
    } else {
      ElMessage.error(response.data.msg);
    }
  });
};
// 定义处理选择变化的方法
const handleSelectionChange = (selection) => {
  console.log('Selected buildings:', selection);
  // 这里可以实现多选操作逻辑，例如批量删除等
};
//跳转房间页面
const showRoom = (id) =>{
  router.push('/room?id='+id)
}
// 定义状态格式化函数
const statusFormatter = (row, column, cellValue,index) => {
  if(cellValue==1){
    cellValue='占用';
  }else if(cellValue==2){
    cellValue='空闲';
  }
  return cellValue;
  /*const statusMap = {
    '0': '使用中',
    '1': '闲置',
    '2': '维修中',
    '3': '已报废'
  };
  return statusMap[cellValue] || '未知状态';*/
};
//定义楼宇类型显示文字转换的方法
const buildTypeFormatter = (row, column,cellValue,index)=>{
  if(!buildingTypeArr.value){
    return cellValue;
  }
  for(let item of buildingTypeArr.value){
    if(item.value == cellValue){
      cellValue = item.label;
    }
  }
  return cellValue;
}
</script>